<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" @close="onCancel">
      <a-typography>
          <a-typography-title :heading="2" style="text-align: center">{{ formState.title }}</a-typography-title>

          <a-space align="center"  style="width: 100%;">
            <a-tag color="red">所属分类: {{ formState.code }}</a-tag>
            <a-tag color="green">阅读次数：{{ formState.kill }}</a-tag>
            <a-tag color="cyan">显示排序值:{{ formState.sort }}</a-tag>
          </a-space>
          <a-divider/>
          <div style="text-align: center">
            <a-image :fit="'cover'" width='500' preview :src="record.image"/>
          </div>
          <div style="padding: 12px; font-size: 14px" v-html="record.enterAge"></div>
        </a-typography>
      <template #footer>
          <a-button type="primary" @click="onCancel">关闭</a-button>
      </template>
  </a-drawer>
</template>
<script setup lang="ts">

import {EditDrawer} from "@/libs/core";
import {BREED_EDIT} from "../../resource/form";

const {BODY} = BREED_EDIT
const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const config = {tplRecord:BODY,rawRecord:props.record,rowKey:'id',emit}

const service = new EditDrawer(config)
const { formState, LAYER,onCancel} = service
LAYER.title = '预览'

</script>
<style scoped lang="less">
.arow{
    display: flex;
    align-items: center
}
</style>